<template>
<view>
<!--pages/topicality/subtopic/subtopic.wxml-->
<!--<import src="../../webview/contact.wxml"></import>-->
<!-- <template is="inContact" data="{{showtk}}" /> -->
<view>
  <view class="navbar" :style="'padding-top:' + navtop + 'px;background-color: rgba(255, 255, 255,' + (scrollTop / 260 > 1 ? 1 : scrollTop / 260) + ');'">
    <view class="nav">
      <navigator hover-class="none" open-type="navigateBack">
        <image :src="scrollTop / 200 > 1 ? '/static/images/topical/bleft.png':'/static/images/topical/fleft.png'"></image>
      </navigator>
      <text :style="'color:rgba(0, 0, 0,' + (scrollTop / 260 > 1 ? 1 : scrollTop / 260) + ')'">{{subtopic.sname}}</text>
    </view>
  </view>
  <image :src="topicDetail.banner" class="main-img" mode="widthFix"></image>
  <view class="banli-box">
    <view class="banli" @tap="showItems">
      <view class="banli-title">
        <view class="title">我要办理</view>
        <image src="/static/images/topical/double_right.png" mode></image>
        <view class="item-text">{{subtopicName}}</view>
      </view>
      <image :src="showItems?'/static/images/topical/shang.png':'/static/images/topical/xia.png'"></image>
    </view>
    <view class="items-box" v-if="showItems">
      <view v-for="(item, index) in subList" :key="index" :class="item.showOption?'serve-items':'items'" @tap="subListClick" :data-sname="item.sname" :data-name="item.name" :data-id="item.id">{{item.sname}}</view>
    </view>
  </view>

  <view class="work-box body" v-if="servList.length>=1">
    <view class="tj-left" style="margin-bottom: 40rpx;">
      <image src="/static/images/dbline.png" mode></image>
      <text>为您提供</text>
    </view>
    <scroll-view scroll-x="true" scroll-with-animation="true" scroll-left="0" @scroll="getleft">
      <view class="worklist-box">
        <view v-for="(item, index) in servList" :key="index" class="work-list" @tap="servClick" :data-path="item.path" :data-appid="item.appid" :data-title="item.title">
          <image :src="item.logo"></image>
          <text>{{item.stitle}} </text>
        </view>
      </view>
    </scroll-view>

    <view v-if="slideShow" class="slide">
      <view class="slide-bar" style="width:110rpx;">
        <view class="slide-show" :style="'width:' + slideWidth + 'rpx;margin-left:' + (slideLeft<=1 ? 0 : slideLeft) + 'rpx'"></view>
      </view>
    </view>
  </view>

  <view class="want-to-see" v-if="subContent[0]">
    <view class="tj-left" style="margin-bottom: 40rpx;">
      <image src="/static/images/dbline.png" mode></image>
      <text>我想看</text>
    </view>
    <view class="channel-box">
      <view class="channel">
        <view v-for="(item, index) in subtitle" :key="index" class="title" @tap="menuClick" :data-index="index">
          <view :class="meunIndex === index?'seltext':'noseltext'">{{item}}</view>
          <view class="line" v-if="meunIndex === index"></view>
        </view>
      </view>
      <view v-for="(item, index) in subContent[meunIndex]" :key="index" class="pd-item">
        <navigator class="items" :url="'/pages/article/detail/detail?id=' + item.id + '&type=' + item.pagetype + '&city=' + citycode" hover-class="none">
          <view class="title-box">
            <view class="title">{{item.title}}</view>
            <view class="time">{{item.publictime}}</view>
          </view>
          <image :src="item.images" mode="aspectFill" v-if="item.images"></image>
        </navigator>
      </view>
    </view>
  </view>

  <view class="zuixin" v-if="topicDetail.policy">
    <view class="title">
      <view class="shulie"></view>
      <text>最新政策</text>
    </view>
    <view class="miaosu">{{topicDetail.policy}}</view>
  </view>

  <view class="tj-box" v-if="topicDetail.classid!=0 && infoList!=''">
    <view class="tj-title">
      <view class="tj-left">
        <image src="/static/images/dbline.png" mode></image>
        <text>推荐文章</text>
      </view>
      <navigator class="tj-right" hover-class="none" :url="'/pages/article/lanmu/lanmu?id=' + topicDetail.classid + '&type=' + topicDetail.type + '&city=' + citycode">
        <text>查看更多</text>
        <image src="/static/images/sys/right.png" mode></image>
      </navigator>
    </view>
    <view v-for="(item, index) in infoList" :key="index" class="pd-item">
      <navigator class="items" :url="'/pages/article/detail/detail?id=' + item.id + '&type=' + item.pagetype + '&city=' + citycode" hover-class="none">
        <view class="title-box">
          <view class="title">{{item.title}}</view>
          <view class="time">{{item.publictime}}</view>
        </view>
        <image :src="item.images" mode="aspectFill" v-if="item.images"></image>
      </navigator>
    </view>
  </view>
  <view class="app-bottom">
    <text>我已经到底了哦~</text>
  </view>
</view>


<!-- 快捷导航 -->
<!-- <fastnav qrcodeimg="{{qrcodeimg}}" citycode="{{citycode}}" showNav="{{showNav}}"></fastnav> -->
</view>
</template>

<script>
// pages/topicality/subtopic/subtopic.js
const app = getApp();
const util = require("../../../utils/util.js");
import fastnav from "../../../component/fastnav/fastnav";

export default {
  data() {
    return {
      // cityname: app.extConfig.cityname,
      // citycode: app.extConfig.citycode,
      meunIndex: 0,
      slideWidth: '',
      //滑块宽
      slideLeft: 0,
      //滑块位置
      totalLength: '',
      //当前滚动列表总长
      slideShow: false,
      slideRatio: '',
      showtk: false,
      // 跳转外链的弹框显示
      showNav: true,
      // 快捷导航是否展开
      showItems: true,
      // 我要办理是否展开
      queryWidth: "",
      scrollTop: 0,
      subtopicName: "",
      subList: [],
      servList: [],
      subtitle: [],
      subContent: [],
      citycode: "",
      infoList: [],
      id: "",
      qrcodeimg: "",
      city: "",
      winHeight: "",
      winWidth: "",
      navtop: "",
      inputHeight: "",
      subtopic: "",
      topicDetail: "",
      bannerArray: ""
    };
  },

  components: {
    fastnav
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var sceneData = [];

    if (options.scene != undefined) {
      var scene = decodeURIComponent(options.scene);
      var arrPara = scene.split("/");

      for (var i in arrPara) {
        sceneData.push(arrPara[i]);
      }
    }

    this.setData({
      id: sceneData[0] ? sceneData[0] : options.id ? options.id : '',
      citycode: sceneData[1] ? sceneData[1] : options.city ? options.city : uni.getStorageSync("citycode") ? uni.getStorageSync("citycode") : 'sz'
    });
    uni.setStorageSync('citycode', this.citycode);
    util.getUrl(app.globalData.url).then(res => {
      // 获取城市公众号二维码
      util.cityConfig(this.citycode).then(res => {
        this.setData({
          qrcodeimg: res.qrcode
        });
      });
      util.cityList().then(res => {
        let citydata;
        if (res.allcity && Array.isArray(res.allcity)) citydata = res.allcity.filter(v => v.citycode == this.citycode);
        if (citydata) this.setData({
          city: citydata[0].cityname
        });
        uni.setStorageSync('city', this.city);
      });
      this.getsubTopicDetail(this.id);
    }); // 获取屏幕高度

    uni.getSystemInfo({
      success: res => {
        var clientHeight = res.windowHeight,
            clientWidth = res.windowWidth,
            rpxR = 750 / clientWidth;
        var calc = clientHeight * rpxR;
        this.setData({
          winHeight: calc,
          winWidth: clientWidth * rpxR
        });
      }
    }); //获取胶囊位置信息

    let menuButtonObject = uni.getMenuButtonBoundingClientRect();
    this.setData({
      navtop: menuButtonObject.top,
      inputHeight: menuButtonObject.height
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: this.subtopic ? this.subtopic.name : "本地宝",
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg"
    };
  },
  // 分享朋友圈
  onShareTimeline: function () {
    return {
      title: this.subtopic ? this.subtopic.name : "本地宝",
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg",
      query: {
        id: this.id,
        city: this.citycode
      }
    };
  },
  methods: {
    // 我要办理是否展开
    showItems() {
      this.setData({
        showItems: !this.showItems
      });
    },

    // 子专题详情
    getsubTopicDetail(id) {
      let data = {
        action: "childDetail",
        id: id,
        citycode: this.citycode
      };
      util.request('zhuanti.php', data).then(res => {
        let subtopic = res.data.data;

        if (subtopic) {
          uni.setNavigationBarTitle({
            title: subtopic.name
          });
          this.setData({
            subtopic: subtopic,
            subtitle: [subtopic.title1 ? subtopic.title1 : '', subtopic.title2, subtopic.title3, subtopic.title4],
            subContent: [subtopic.article1, subtopic.article2, subtopic.article3, subtopic.article4],
            subtopicName: subtopic.sname
          });
          this.subtopicName = subtopic.sname;
          this.getBannerData(subtopic.name);
          this.getToolData(subtopic.name);
          this.getTopticlist(subtopic.pid, subtopic.name);
          this.getTopicDetail(subtopic.pid);
        }
      });
    },

    // 总专题详情
    getTopicDetail(id) {
      let data = {
        action: "detail",
        id: id
      };
      util.request('zhuanti.php', data).then(res => {
        this.setData({
          topicDetail: res.data.data
        });
        this.getInfoList(this.topicDetail.hasOwnProperty('type') ? this.topicDetail.type : '', this.topicDetail.classid);
      });
    },

    // 子专题列表
    getTopticlist(pid, topicName) {
      let data = {
        action: "child",
        pid: pid
      };
      util.request('zhuanti.php', data).then(res => {
        if (res.data.data) {
          res.data.data.forEach((v, k) => {
            if (v.name === topicName) {
              v.showOption = true;
            } else {
              v.showOption = false;
            }
          });
          this.setData({
            subList: res.data.data
          });
          let report = {
            action: this.subList[0].sname
          };
          if (util.getScene(uni.getLaunchOptionsSync().scene)) report.scene = util.getScene(uni.getLaunchOptionsSync().scene);
        }
      });
    },

    // 获取文章列表接口
    getInfoList(type, id) {
      let infoData = {
        citycode: type == 'bsy' && this.citycode == 'sz' ? 'bsy' : this.citycode,
        action: 'list',
        pagesize: 10,
        classid: id
      };
      util.request('index.php', infoData, 'GET').then(res => {
        this.setData({
          infoList: res.data
        }); // this.infoList = res.data;
      });
    },

    // 首页swiper-banner
    getBannerData(name) {
      let bannerData = {
        action: 'lunbo',
        city: this.city,
        block: "专题",
        blockvalue: name
      };
      util.request('service.php', bannerData).then(res => {
        this.setData({
          bannerArray: res.data.data
        });
      });
    },

    // 获取工具专题服务接口
    getToolData(toolname) {
      let toolData = {
        action: "tools",
        city: this.city,
        keywords: toolname,
        version: app.globalData.version,
        type: "zhuanti"
      };
      util.request('service.php', toolData).then(res => {
        this.setData({
          servList: res.data.data
        }); // 获取顶部的距离

        var query = uni.createSelectorQuery();
        query.select('.worklist-box').boundingClientRect(res => {
          if (res != null) {
            this.setData({
              queryWidth: res.width
            });
          } // 计算比例


          this.getRatio();
        }).exec();
      });
    },

    //根据分类获取比例
    getRatio() {
      if (!this.servList || this.servList.length <= 4) {
        this.setData({
          slideShow: false
        });
      } else {
        var _totalLength = this.servList.length * 170; //分类列表总长度
        //滚动列表长度与滑条长度比例
        // var _ratio = 230 / _totalLength * (750 / this.queryWidth);


        var _ratio = 100 / _totalLength * (750 / this.queryWidth); //当前显示红色滑条的长度(保留两位小数)


        var _showLength = 750 / _totalLength * 100;

        this.setData({
          slideWidth: _showLength,
          totalLength: _totalLength,
          slideShow: true,
          slideRatio: _ratio
        });
      }
    },

    //slideLeft动态变化
    getleft(e) {
      this.setData({
        slideLeft: e.detail.scrollLeft * this.slideRatio
      });
    },

    menuClick(e) {
      let meunIndex = e.currentTarget.dataset.index;
      this.setData({
        meunIndex
      });
    },

    // 我要办理
    subListClick(e) {
      let id = e.currentTarget.dataset.id;
      let name = e.currentTarget.dataset.name;
      let sname = e.currentTarget.dataset.sname;
      let report = {
        action: name
      };

      if (util.getScene(uni.getLaunchOptionsSync().scene)) {
        report.scene = util.getScene(uni.getLaunchOptionsSync().scene);
        util.reportMessage("subtopic", report);
      }

      this.setData({
        servList: '',
        meunIndex: 0
      });
      this.subList.forEach((v, k) => {
        if (v.sname == sname) {
          v.showOption = true;
          this.getsubTopicDetail(id);
        } else {
          v.showOption = false;
        }
      });
      this.setData({
        subList: this.subList
      });
    },

    // banner点击事件
    bannerClick(e) {
      let path = e.currentTarget.dataset.path;
      let linkname = e.currentTarget.dataset.title;
      let appid = e.currentTarget.dataset.appid;

      if (path.indexOf("pages") == -1 && path.indexOf("mp.weixin.qq.com") == -1) {
        this.setData({
          showtk: true
        });
        util.navContact(linkname, path);
      } else {
        util.navMethod(path, appid);
      }
    },

    // 工具服务点击事件
    servClick(e) {
      let path = e.currentTarget.dataset.path;
      let appid = e.currentTarget.dataset.appid;
      let linkname = e.currentTarget.dataset.title;

      if (path.indexOf("pages") == -1 && path.indexOf("mp.weixin.qq.com") == -1) {
        this.setData({
          showtk: true
        });
        util.navContact(linkname, path);
      } else {
        util.navMethod(path, appid);
      }
    },

    // 进入客服会话
    contact() {
      this.setData({
        showtk: false
      });
    },

    // 关闭
    close() {
      this.setData({
        showtk: false
      });
    },

    /**
     * 页面滑动事件的处理函数
     */
    onPageScroll: function (e) {
      this.setData({
        showNav: false,
        scrollTop: e.scrollTop
      });
    }
  }
};
</script>
<style>
/* pages/topicality/subtopic/subtopic.wxss */

.main-img {
    width: 100%;
    position: relative;
}

.banli-box {
    padding: 36rpx 40rpx;
}

.banli {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.banli image {
    width: 26rpx;
    height: 12rpx;
}

.banli-title {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.banli-title image {
    width: 22rpx;
    height: 20rpx;
    margin: 0 20rpx;
}

.banli-title .item-text {
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: bolder;
    text-align: left;
    color: #f60;
}

.banli-box .items-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 32rpx;
}

.serve-items {
    width: 150rpx;
    background-color: #ffece0;
    border-radius: 32rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: center;
    color: #f60;
    padding: 15rpx 0rpx;
    margin-right: 22rpx;
    margin-bottom: 20rpx;
}

.serve-items:nth-child(4n) {
    margin-right: 0;
}

.banli-box .items-box .items {
    width: 150rpx;
    background-color: #f4f4f4;
    border-radius: 32rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: center;
    color: #5c5c5c;
    padding: 15rpx 0rpx;
    margin-right: 22rpx;
    margin-bottom: 20rpx;
}

.banli-box .items-box .items:nth-child(4n) {
    margin-right: 0;
}

.work-box {
    background: #fff;
    border-radius: 14rpx;
    padding: 20rpx 40rpx;
    margin-top: 15rpx;
    border-top: 10rpx solid #eee;
}

.worklist-box {
    display: flex;
    align-items: flex-start;
}

.work-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 65rpx;
}

.work-list image {
    width: 90rpx;
    height: 90rpx;
    margin-bottom: 15rpx;
}

.work-list text {
    width: 120rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #545454;
    text-align: center;
}


/* 隐藏滚动条 */

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}


/* 横向滚动条 */

.slide {
    height: 30rpx;
    background: #fff;
    width: 100%;
    margin-top: 50rpx;
    /* padding:14rpx 0 5rpx 0 */
}

.slide .slide-bar {
    height: 10rpx;
    margin: 0 auto;
    background: #eee;
    border-radius: 6rpx;
}

.slide .slide-bar .slide-show {
    height: 100%;
    background-color: #f60;
    border-radius: 6rpx;
}

.tj-left image {
    height: 26rpx;
    width: 16rpx;
}

.tj-left text {
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: bolder;
    text-align: left;
    color: #141414;
    margin-left: 16rpx;
}

.tj-box {
    padding: 30rpx 40rpx;
    border-top: 10rpx solid #eee;
}

.tj-box .tj-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.tj-box .tj-title .tj-left image {
    height: 26rpx;
    width: 16rpx;
}

.tj-box .tj-title .tj-left text {
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: bolder;
    text-align: left;
    color: #141414;
    margin-left: 16rpx;
}

.tj-box .tj-title .tj-right image {
    width: 12rpx;
    height: 18rpx;
}

.tj-box .tj-title .tj-right text {
    font-size: 26rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #989898;
    margin-right: 16rpx;
}

.want-to-see {
    border-top: 10rpx solid #eee;
    padding: 30rpx 40rpx;
}

.want-to-see .channel-box .channel {
    border-bottom: 1px solid #ececec;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 20rpx;
}

.want-to-see .channel-box .channel .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 60rpx;
}

.want-to-see .channel-box .channel .title:last-child {
    margin-right: 0;
}

.seltext {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: bold;
    text-align: center;
    color: #141414;
    margin-bottom: 23rpx;
}

.noseltext {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: bold;
    text-align: left;
    color: #5b5b5b;
    margin-bottom: 32rpx;
}

.line {
    border: 5rpx solid #f60;
    width: 46rpx;
    border-radius: 40rpx;
}

.pd-item {
    margin-top: 16px;
}

.pd-item .items {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}

.pd-item .items:last-child {
    border-bottom: 0;
}

.pd-item .items image {
    width: 94px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 6px;
}

.title-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 10px;
}

.title-box .title {
    font-size: 15px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: left;
    color: #141414;
    line-height: 20px;
}

.time {
    font-size: 11px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: left;
    color: #989696;
    margin-top: 10px;
}

.zuixin {
    border-top: 10rpx solid #eee;
    padding: 30rpx 40rpx;
}

.zuixin .title {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.shulie {
    border: 5rpx solid #f60;
    height: 26rpx;
    border-radius: 40rpx;
}

.zuixin .title text {
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: bolder;
    text-align: left;
    color: #141414;
    margin-left: 16rpx;
}

.miaosu {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #858585;
    margin-top: 12rpx;
}

.navbar {
    position: fixed;
    top: 0;/*  #ifdef  H5  */
    top: calc(88rpx + constant(safe-area-inset-top));
    top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */
    width: 100%;
    z-index: 99;
    padding-bottom: 30rpx;
    /* background-color: #fff; */
}

.nav {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.nav image {
    width: 48rpx;
    height: 48rpx;
    margin-left: 20rpx;
}

.jiantou {
    width: 25rpx;
    height: 25rpx;
    border-bottom: 4rpx solid #fff;
    border-left: 4rpx solid #fff;
    transform: rotate(45deg);
    margin-left: 40rpx;
}

.nav text {
    text-align: center;
    flex: 0.8;
    color: transparent;
}
</style>